<template>
    <div class="video">
      <div class="title-wrapper">
        <span class="tag">MV</span>
        <span class="title">{{mvName}}</span>
        <span class="artist">{{mvArtist}}</span>
      </div>
      <video :src="mvUrl" autoplay controls=""></video>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          mvName: '',
          mvUrl: '',
          mvArtist: '',
          baseUrl: "https://autumnfish.cn"
        };
      },
      async created() {
        let backData = await this.$axios.get(`${this.baseUrl}/mv/detail?mvid=${this.$route.params.mvid}`);
  
        this.mvName = backData.data.data.name;
        this.mvArtist = backData.data.data.artistName;
        let res = await this.$axios.get("/mv/url?id=" + this.$route.params.mvid);
        this.mvUrl = res.data.data.url
      }
    }
  </script>
  
  <style scoped>
    @import "@/assets/css/video.css";
  </style>